<!DOCTYPE html>
<html>
<!-- 测试垂直居中 -->

<head>
    <style>
        .ring {
            border: 1px solid red;
            width: 200px;
            height: 200px;
            font-family: 'Times New Roman', Times, serif;
            writing-mode: tb-lr;
            writing-mode: vertical-lr;
            text-align: center;
        }

        .md {
            border: 1px solid goldenrod;
            width: 95%;
            writing-mode: lr-tb;
            writing-mode: horizontal-tb;
            text-align: center;
        }

        .rflx {
            display: flex;
            flex-direction: column;
            height: 100px;
            width: 100px;
            border: 1px solid blueviolet;
            flex-wrap: wrap-reverse;
        }
    </style>
</head>

<body>
    <div class="ring"><span class="md">这是文本 , This is text</span></div>
    <p></p>
    <div class="rflx">
        <span>演示flex</span>
        <span>壹</span>
        <span>贰</span>
        <span>叁</span>
        <span>肆</span>
        <span>伍</span>
        <span>陆</span>
        <span>柒</span>
        <span>捌</span>
        <span>玖</span>
    </div>
</body>

</html>